<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素类名操作</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #target_div {
      width: 500px;
      height: 500px;
      filter: drop-shadow(0 0 4px #000);
      background-color: #ccc;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .red {
      background-color: #f00!important;
    }

    .green {
      background-color: #0f0!important;
    }
  </style>
</head>

<body>
  <button id="change_red">变为红类</button>
  <button id="change_green">切换绿类</button>
  <button id="remove_red">移除红类</button>
  <div id="target_div"></div>
  <script>
    // 类名的操作可以通过以下方式进行操作
    // dom.classList.add(classname)      ————添加类名
    // dom.classList.remove(classname)   ————移除类名
    // dom.classList.toggle(classname)   ————切换类名

    // dom的id可以直接作为对象来使用，这里不单独获取了
    // 点击事件

    change_red.addEventListener('click', function () {
      // 先将目标div的class列表变为空
      target_div.classList = ''
      // 为列表添加red类名
      target_div.classList.add('red')
      console.log(target_div.classList,target_div);
    })
    change_green.addEventListener('click', function () {
      target_div.classList.toggle('green')
      console.log(target_div.classList,target_div);
    })
    remove_red.addEventListener('click',function () {
      target_div.classList.remove('red')
      console.log(target_div.classList,target_div);
    })


  </script>
</body>

</html>